From db8af9bda1d57061fa3f240c2be9bb8bc0b5f838 Mon Sep 17 00:00:00 2001
From: zephex-alt <166333351+zephex-alt@users.noreply.github.com>
Date: Sun, 5 May 2024 05:12:06 +0000
Subject: UI enhancement

---
 src/app/anime/[id]/buttons.jsx | 58 +++++++++++++++++++++++++++++++++++++-----
 1 file changed, 51 insertions(+), 7 deletions(-)

(limited to 'src/app/anime/[id]/buttons.jsx')

diff --git a/src/app/anime/[id]/buttons.jsx b/src/app/anime/[id]/buttons.jsx
index 9c297d2..c1b4615 100644
--- a/src/app/anime/[id]/buttons.jsx
+++ b/src/app/anime/[id]/buttons.jsx
@@ -1,7 +1,7 @@
 "use client";
 
 import styles from "./info.module.css";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { fetch_video_link } from "../videoLinkfetcher";
 import { MediaPlayer, MediaProvider } from "@vidstack/react";
 import "@vidstack/react/player/styles/default/theme.css";
@@ -15,6 +15,13 @@ import { storeLocal } from "../history/storeData";
 export default function Button({ data2: info }) {
 	const currentDate = new Date();
 	const [videoLink, setVideoLink] = useState(null);
+	const [buttonGroups, setButtonGroups] = useState(null);
+
+	useEffect(() => {
+		create_button_group(0, 50);
+	}, []);
+
+	const groups = createGroups(info.episodes, 50);
 
 	async function video(id) {
 		const link = await fetch_video_link(id);
@@ -25,6 +32,14 @@ export default function Button({ data2: info }) {
 		}
 	}
 
+	function createGroups(array, size) {
+		const groups = [];
+		for (let i = 0; i < array.length; i += size) {
+			groups.push(array.slice(i, i + size));
+		}
+		return groups;
+	}
+
 	function store_to_local(name, image, episode, id) {
 		let newData = {
 			name: name,
@@ -42,13 +57,11 @@ export default function Button({ data2: info }) {
 		storeLocal(newData);
 	}
 
-	return (
-		<main>
-			<h2 className={styles.buttonHeader}>Episodes: </h2>
+	function create_button_group(start, end) {
+		setButtonGroups(
 			<div className={styles.buttonContainer}>
-				{info &&
-					info.episodes &&
-					info.episodes.map((item, index) => (
+				{info.episodes &&
+					info.episodes.slice(start, end).map((item, index) => (
 						<button
 							className={styles.dramaButton}
 							key={index}
@@ -68,7 +81,38 @@ export default function Button({ data2: info }) {
 						</button>
 					))}
 			</div>
+		);
+	}
 
+	function handleSelectChange(event) {
+		const selectedIndex = event.target.selectedIndex;
+		const selectedGroup = groups[selectedIndex];
+		if (selectedGroup) {
+			create_button_group(
+				selectedGroup[0].number - 1,
+				selectedGroup[selectedGroup.length - 1].number
+			);
+		}
+	}
+
+	return (
+		<main>
+			<h2 className={styles.buttonHeader}>Episodes: </h2>
+			{info.episodes && (
+				<select
+					onChange={(event) => handleSelectChange(event)}
+					className={styles.SelectClass}
+				>
+					{groups &&
+						groups.map((item, index) => (
+							<option key={index}>
+								{item[0].number} -{" "}
+								{item[item.length - 1].number}
+							</option>
+						))}
+				</select>
+			)}
+			{buttonGroups}
 			{videoLink && (
 				<div
 					className={styles.videoPopUp}
-- 
cgit v1.2.3